export const Button = (props: { name: string, id: string, svg: string, needsBadge: boolean, link: string }) => {

    const {name, id, svg, needsBadge, link} = props
    const handleClick = () => {
        // Navigate to another page
        window.location.href = link;
    };

    return (

        <li className="nav-item">
            <button className="btn rounded-5 m-1 position-relative navbar-button" type="button"
                    id={id} onClick={handleClick}>
                {needsBadge &&
                    <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
                          id="cart-size-span">
          0
          <span className="visually-hidden">unread messages</span>
        </span>
                }
                <svg className="bi pe-none me-2" width="18" xmlns="http://www.w3.org/2000/svg" height="18"
                     fill="currentColor">

                    <path
                        d={svg}
                    />
                </svg>
                {name}
            </button>
        </li>
    );
}